
import React, { useState, useRef } from 'react';
import { DeepSeek } from '../../api/ai';
import './index.css'; 
import type { AiDataMessage } from './index.type'

const AIFloatingWindow:React.FC  = () => {
  // 状态管理
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const [inputText, setInputText] = useState<string>('');
  const [messages, setMessages] = useState<AiDataMessage[]>([]);
  const [position, setPosition] = useState< { x: number; y: number; }>({ x: window.innerWidth - 320, y: 60 });
  const [dragging, setDragging] = useState<boolean>(false);
  const dragStartPos = useRef< { x: number; y: number; }>({ x: 0, y: 0 });
  const windowRef = useRef(null);

  // 拖动处理逻辑
  const handleMouseDown = (e: { clientX: number; clientY: number; }) => {
    setDragging(true);
    dragStartPos.current = {
      x: e.clientX - position.x,
      y: e.clientY - position.y
    };
  };

  const handleMouseMove = (e: { clientX: number; clientY: number; }) => {
    if (dragging) {
      setPosition({
        x: e.clientX - dragStartPos.current.x,
        y: e.clientY - dragStartPos.current.y
      });
    }
  };

  const handleMouseUp = () => {
    setDragging(false);
  };

  // API调用
  const handleSubmit = async () => {
    if (!inputText.trim()) return;
    
    const userMessage = { text: inputText, isUser: true };
    setMessages(prev => [...prev, userMessage]);
    
    try {
      const response = await DeepSeek({ content: inputText });
      console.log(response,'response');
      
      const aiMessage = { 
        text: response.data.data.reply, 
        isUser: false 
      };
      setMessages(prev => [...prev, aiMessage]);
      console.log(messages,'messages');
      
    } catch (error) {
      setMessages(prev => [...prev, { 
        text: '服务暂时不可用，请稍后再试', 
        isUser: false 
      }]);
    }
    
    setInputText('');
  };

  // 样式动态计算
  const windowStyle = {
    transform: `translate(${position.x}px, ${position.y}px)`,
    width: isExpanded ? '300px' : '50px',
    height: isExpanded ? '400px' : '50px'
  };

  return (
    <div 
      className={`ai-floating-window ${dragging ? 'dragging' : ''}`}
      style={windowStyle}
      ref={windowRef}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      <div 
        className="header"
        onMouseDown={handleMouseDown}
      >
        <button 
          className="toggle-btn"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          {isExpanded ? '×' : 'AI'}
        </button>
      </div>

      {isExpanded && (
        <div className="content">
          <div className="message-container">
            {messages.map((msg, index) => (
              <div key={index} className={`message ${msg.isUser ? 'user' : 'ai'}`}>
                {msg.text}
              </div>
            ))}
          </div>
          <div className="input-area">
            <input
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && handleSubmit()}
              placeholder="输入您的问题..."
            />
            <button onClick={handleSubmit}>发送</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default AIFloatingWindow;